<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="lib/vue.js"></script>
		<!-- 设置样式  -->
		<style>
			[v-cloak] {
				display: none;
			}

			.red {
				color: red;
			}

			.thin {
				font-weight: 200;
			}

			.itaic {
				font-style: inherit;
			}
		</style>
	</head>
	<!--  标签  1 v-cloak 解决闪烁问题 （展示1 代码）
	           2 v-text 文本展示标签 和 {{}} 插值表达式相同但是有一定的区别 （展示1 代码）
			   3 v-for 循环列表展示和python循环语法基本相同 （展示2）
			   4 v-on:click 和 @click 事件展示标签 （展示3）
			   5 v-html 展示html 文本（展示4）
			   6 v-bind:属性 和 : 属性 语法糖  vue 修改属性的标签(展示5）
			   7 v-model 双向数据绑定标签 《重点》，只能进行
			   8 v-if 判断元素
			   9 v-show 判断显示和小时
			   
	 
	 -->

	<body>
		<div id="app">
			<h2>插值表达式使用</h2>
			<h3>插值表达式计算：{{1+1}}</h3>
			<h3>插值表达式：{{false? "aaaa":"aa"}}</h3>

			<h2>展示1</h2>
			<!-- 减少展示的时候延迟 v-cloak 解决插值表达式闪烁的问题 在网速慢的时候出现 -->
			<p v-cloak>=========={{name}}--------</p>
			<!-- {{}} 和 v-text 都是数据插入的方式  -->
			<!-- 区别1 text 不会出现闪烁的问题
			        2 text 在解析额时候会将所有的标签中别信息 差值表达式则不行只会替换占位符
			 -->
			<h4 v-text="name">==============</h4>
			<h2>展示2</h2>
			<!-- vue循环遍历方法 -->
			<ul>
				<li v-for="item in movives">{{item}}</li>
			</ul>

			<h2>展示3</h2>
			<!-- vue 监听事件 v-on 和 @某某命令相同 -->
			<h2>当前数量:{{count}}</h2>
			<!-- 原始写法 -->
			<!-- <button v-on:click="count++">+</button>
		   <button @click="count--">-</button> -->
			<button v-on:click="add(count)">+</button>
			<button @click="rm(count)">-</button>
			<h2>展示4</h2>
			<!-- 展示他HTMl标签 -->
			<div v-html="msg"></div>
			<h2>展示5</h2>
			<input type="button" value="按钮" v-bind:title="mytitai" />
			<input type="button" value="按钮1" :title="mytitai" />

			<h2>跑马灯效果展示</h2>
			<button @click="start">开始滚动</button>
			<button @click="stop">停止滚动</button>
			<p v-text="mages"></p>
			<h2>展示6</h2>
			<!-- v-bind 只能进行单项的数据绑定 -->
			<!-- v-model 可以进行双向绑定 只能在表单元素使用 -->
			<h4>{{msg1}}</h4>
			<input type="text" :value="msg1" />
			<input type="text" v-model="msg1" />
			<h2>计算器</h2>
			<input type="text" v-model="count1" />
			<select v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model="count2" />
			<input type="button" value="=" @click="calc" />
			<input type="text" v-model="count3" />
			<h2>vue中的样式</h2>
			<!-- 样式绑定 使用：进行绑定-->
			<h4 :class="['red']">测试使用</h4>
			<!-- 三元表达式样式绑定 -->
			<h4 :class="['red', flag?'thin':'itaic']">三元测试</h4>
			<h4 :class="['red', {'itaic':flag}]">三元表达式变种</h4>

			<h4 :style="{color:'red'}">测试</h4>
			<!-- 展示标签 -->
			<div v-show="isShow">
				动态显示
			</div>
			<div v-if="ifShow">
				是否展示
			</div>
			<h4>V-for循环</h4>
			<!-- 普通循环 -->
			<p v-for="item in list">{{item}}</p>
			<!-- 打印索引 -->
			<p v-for="(item , i) in list">{{item}} ---索引 {{i}}</p>
			<!--   解析复杂对象 -->
			<p v-for="user in userList">{{ user.id }} --名字 {{user.name}}</p>
			<!--    遍历对象-->
			<p v-for="(k,v) in userObjcet"> {{k}} --值 {{v}}</p>
			<!--    数字循环-->
			<p v-for="count in 10">循环次数{{count}}</p>
			<!--    注意事项 在2.20 之后组件中使用f-for 必须使用key 这个字段在获取vue-->
			<p>使用小案例————————v-for循环</p>
			<div>
				<label>
					Id: <input type="text" v-model="ids">
				</label>
				<label>
					Name: <input type="text" v-model="names">
				</label>
				<input type="button" @click="adds()" value="添加">

				<p v-for="user in userList">
					<input type="checkbox"> {{ user.id }} --名字 {{user.name}}
				</p>

			</div>
			<h4>V-If测试演示程序 v-show 展示</h4>
			<input @click="vshow" type="button" value="是否显示"></input>
			<!--    v-if 每次都会删除这个标签-->
			<h3 v-if="vIf">vif</h3>
			<!--    v-show只是参数不信-->
			<h3 v-show="vIf">v-show展示</h3>
			<!-- html进行显示测试 -->
			<h3 v-if="Math.random() > 5">
				if和else相关进行处理
			</h3>
			<h3 v-else>
				这是else显示内容
			</h3>

		</div>

		<script>
		   
			// vue实例对象
			const vm = new Vue({
				// 监听那个模板
				el: "#app",
				// 展示数据
				data: {
					vIf: true,
					name: "aaa",
					ids: "",
					names: "",
					// 循环的列表
					movives: ['测试', '小明', '测试2', '大话西游'],
					// 当前数量
					count: 0,
					msg: "<h1> 这是h1</h1>",
					mytitai: "自定义tital",
					mages: "猥琐发育别浪",
					intverId: null,
					msg1: '数据绑定测试',
					count1: 0,
					count2: 0,
					count3: 0,
					opt: '+',
					flag: true,
					isShow: true,
					ifShow: true,
					list: [1, 2, 3, 4],
					userList: [{
							id: "1",
							name: '小明'
						},
						{
							id: "2",
							name: '小明'
						},
						{
							id: "3",
							name: '小明'
						},
						{
							id: "4",
							name: '小明'
						}
					],
					userObjcet: {
						id: "eiweiw",
						name: "小米",
						sex: "nn"
					},

				},
				// vue 方法
				methods: {
					adds: function() {
						this.userList.push({
							id: this.ids,
							name: this.names
						})
					},
					add: function(data) {
						this.count++
						console.log("add执行了当前值为")
					},
					rm: function(data) {
						this.count--
						console.log("rm执行了当前值为")
					},
					vshow: function() {
						this.vIf = !this.vIf
					},
					start: function(data) {
						// 函数表达式解决this 函数
						this.intverId = setInterval(() => {
							var s1 = this.mages.substring(0, 1)
							var s2 = this.mages.substring(1)
							this.mages = s2 + s1
						}, 400)
						MAth.router
					},
					stop: function() {
						clearInterval(this.intverId)
					},
					calc: function() {
						switch (this.opt) {
							case '+':
								this.count3 = parseInt(this.count1) + parseInt(this.count2)
								break;
							case '-':
								this.count3 = parseInt(this.count1) - parseInt(this.count2)
								break;
							case '*':
								this.count3 = parseInt(this.count1) * parseInt(this.count2)
								break;
							case '/':
								this.count3 = parseInt(this.count1) / parseInt(this.count2)
								break;
						}
					}
				}


			})
		</script>

	</body>

</html>
<script>
	import Index from "../vue-maoyan/src/pages";
	export default {
		components: {
			Index
		}
	}
</script>
